<!-- <template>
	<view class="app">
		<view class="extension-link">
			<view class="title">
				<text class="title-txt">推广链接</text>
				<text class="subjet-txt">复制链接分享</text>
			</view>
			
			<view class="link">
				<text class="txt">{{shareUrl || ''}}</text>
				<view class="copy-btn" @click="copyStr">复制</view>
			</view>
		</view>
		
		<view class="qrcode">
			<u--image bgColor="transparent" :showLoading="true" :lazy-load="true" :src="shareQrcodeUrl" width="500rpx" height="500rpx">
				 <template v-slot:loading>
				     <u-loading-icon></u-loading-icon>
				   </template>
			</u--image>
		</view>
		
		<view class="tips">
			<text class="txt">长按二维码，分享微信好友</text>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	import QRCode  from 'qrcode';
	export default {
		data() {
			return {
				shareUrl: '',
				shareQrcodeUrl: ''
			};
		},
		computed: {
			...mapState(['data'])
		},
		async onLoad() {
			this.createShareUrl();
			await this.createQrcode();
		},
		methods: {
			async createQrcode() {
				try{
					this.shareQrcodeUrl = await QRCode.toDataURL(this.shareUrl);
				}catch(e){
					console.log(e);
					uni.showToast({
						title: '二维码生成失败',
						icon: 'none'
					});
					//TODO handle the exception
				}
			},
			createShareUrl() {
				let uid = this.data?.user?.user_id || 0,
					url = this.$visitDomain + '#/pages/login/register?pid=' + uid;
				this.shareUrl = url;
			},
			copyStr() {
				uni.setClipboardData({
					data: this.shareUrl
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
	}
	
	.app {
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;
	}
	
	.extension-link {
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 20rpx;
		
		.title {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			
			.title-txt {
				padding-right: 44rpx;
				font-size: 28rpx;
				font-weight: bold;
				color: #333;
			}
			
			.subjet-txt {
				font-size: 24rpx;
				font-weight: 500;
				color: #999;
			}
		}
		
		.link {
			margin-top: 24rpx;
			width: 100%;
			height: 98rpx;
			border-radius: 20rpx;
			padding: 0 36rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			position: relative;
			overflow: hidden;
			background-color: #F5F5F5;
			
			.txt {
				font-size: 28rpx;
				font-weight: bold;
				color: #333;
				white-space: nowrap;
			}
			
			.copy-btn {
				width: 138rpx;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				top: 0;
				right: 0;
				background-color: #333;
				box-shadow: 0 0 10rpx 10rpx #fff;
				color: #fff;
				font-size: 28rpx;
				font-weight: bold;
			}
		}
	}

	.qrcode {
		width: 100%;
		height: 590rpx;
		padding: 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fff;
		margin: 30rpx 0;
		border-radius: 16rpx;
	}
	
	.tips {
		display: flex;
		align-items: center;
		justify-content: center;
		
		.txt {
			height: 60rpx;
			padding: 0 36rpx;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 24rpx;
			font-weight: 500;
			color: #999;
		}
	}
</style>
 -->